<template>
  <v-row style="margin-top: 10vh">
    <v-col offset="1" cols="7">
      <a @click="$router.go(-1)"><v-icon large> mdi-arrow-left-circle-outline</v-icon>返回讨论区</a>
      <v-row style="margin-top: 2%">
        <v-col cols="1"><Avatar v-bind:src="post.authorAvatar"></Avatar></v-col>
        <v-col cols="11">
          <v-card>
            <v-card-title style="font-size: 28px">{{post.title}}</v-card-title>
            <v-card-text><span style="font-weight: bolder;color: black">{{post.authorName}}</span>&nbsp;<span>发布于{{post.publishDate.substring(5,10)}}&nbsp;{{post.publishDate.substring(11,16)}}</span></v-card-text>
            <v-card-text>{{post.content}}</v-card-text>
          </v-card>
        </v-col>
      </v-row>

      <v-row v-for="(reply,i) in post.replies" :key="i">
        <v-col cols="1"><Avatar v-bind:src="reply.authorAvatar"></Avatar></v-col>
        <v-col cols="11">
          <v-card class="tmp-card">
            <v-card-text>
              <span style="font-weight: bolder;color: black">{{reply.authorName}}</span>
              &nbsp;
              <span v-if="reply.isOfficial" style="color: white;background: #ff5151;font-family: 'Adobe 宋体 Std L';border-radius: 2px">置顶</span>
              &nbsp;
              <span>发布于{{reply.publishDate.substring(5,10)}}&nbsp;{{reply.publishDate.substring(11,16)}}</span>
            </v-card-text>
            <DocEditor :content="reply.content" :read_only="true"></DocEditor>
            <replyDialog :reply="reply"></replyDialog>
          </v-card>
<!--          回复中的回复-->
          <div v-if="reply.children.length!=0" style="margin-top: 3%;">
            <v-row v-for="(child,i) in reply.children" :key="i">
              <v-col cols="1"><Avatar v-bind:src="child.authorAvatar"></Avatar></v-col>
              <v-col cols="11">
                <v-card class="tmp-card">
                  <v-card-text>
                    <span style="font-weight: bolder;color: black">{{child.authorName}}</span>
                    &nbsp;
                    <span v-if="child.replyTo.length!=0" style="color: #2196F3">回复:@{{child.replyTo}}</span>
                    &nbsp;
                    <span>发布于{{child.publishDate.substring(5,10)}}&nbsp;{{child.publishDate.substring(11,16)}}</span>
                  </v-card-text>
                  <DocEditor :content="child.content" :read_only="true"></DocEditor>
                </v-card>
              </v-col>
            </v-row>
          </div>
          <DocEditor v-show="isreply"></DocEditor>
        </v-col>

      </v-row>
      <v-row style="margin-top: 2%;font-size: 20px">
        <v-col cols="1">
          {{this.$store.state .user.avatar}}
          <Avatar v-bind:src="this.$store.state.user.avatar"></Avatar>
        </v-col>
        <v-col cols="11">
          <DocEditor @editor-input="getcontent"></DocEditor>
        </v-col>
      </v-row>
      <v-row><v-col offset="11"><v-btn
          @click="submit"
          large style="background: #ff5151;color: white;font-family: 'Adobe 宋体 Std L';font-size: 20px;border-radius: 18px">发表</v-btn></v-col></v-row>
    </v-col>
  </v-row>
</template>

<script>
import replyDialog from "@/components/views/article/replyDialog";
import Avatar from "@/components/views/common/Avatar/Avatar";
import DocEditor from "@/components/views/common/DocEditor";

export default {
  components: {replyDialog, DocEditor, Avatar  },
  name: "Post",
  data: () => ({
    isreply:false,
    post: {
      // content: "无详细内容",
      // authorName:'wangyou',
      // authorAvatar : 'https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png',
      // pubTime: "1234567790",
      // title: "疫情怎么办",
      // publishDate:'2021-07-10T11:17:44.083+00:00',
      // replies:[
        // {
        //   isofficial: true,
        //   content: "无详细内容",
        //   authorName:'丁香园',
        //   authorAvatar : 'https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png',
        //   pubTime: "1234567790",
        //   title: "疫情怎么办",
        //   publishDate:'2021-07-10T11:17:44.083+00:00',
        //   children:[
        //     {
        //       content: "无详细内容",
        //       authorName:'wangyou',
        //       authorAvatar : 'https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png',
        //       pubTime: "1234567790",
        //       title: "疫情怎么办",
        //       publishDate:'2021-07-10T11:17:44.083+00:00',
        //       replyTo:"123",
        //     },
        //     {
        //       content: "无详细内容",
        //       authorName:'wangyou',
        //       authorAvatar : 'https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png',
        //       pubTime: "1234567790",
        //       title: "疫情怎么办",
        //       publishDate:'2021-07-10T11:17:44.083+00:00',
        //       replyTo:"",
        //     },
        //   ],
        // },
        // {
        //   content: "无详细内容",
        //   authorName:'wangyou',
        //   authorAvatar : 'https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png',
        //   pubTime: "1234567790",
        //   title: "疫情怎么办",
        //   publishDate:'2021-07-10T11:17:44.083+00:00',
        //   children: [],
        // }
      // ],
    },
    comment:"",
    loading: false,
  }),
  computed: {
    pubTime() {
      return this.post.pubTime.substring(0, 10);
    },
  },
  created() {
    var id = this.$route.params.id;
    console.log(id)
    if (id == undefined) return;
    this.$api.article
        .getpost(id)
        .then((res) => {
          console.log(res)
          if (res.success) {
            this.post = res.data;
            console.log(this.post)
          } else {
            this.$Message("打开文章失败：" + res.exc);
          }
        })
        .then(() => {
          this.$Message("打开文章失败：网络错误");
        });
  },
  mounted() {
    console.log(this.post)
  },
  methods: {
    changereply(){
      if (this.isreply){
        this.isreply = false
      }
      else this.isreply = true
    },
    submit(){
      this.$api.article.commentpost(this.comment,this.$store.getters.getUserId,this.post.id).then(res=>{
        if (res.success){
          this.$router.go(0);
        }
        else {
          this.$Message.error("评论失败")
        }
      })
    },
    getcontent(data){
      this.comment = data
      console.log(this.comment)
    },
    reserve() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    },
  },
};
</script>

<style scoped>

</style>
